<template>
	<view class="supply-container page-container">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-content">
				<text class="page-subtitle">请填写以下信息，我们将尽快与您联系</text>
			</view>
		</view>

		<!-- 合作申请表单 -->
		<view class="form-section">

			<view class="form-item">
				<text class="form-label">1. 您的姓名 *</text>
				<input class="form-input" placeholder="请输入您的姓名" v-model="formData.contact_name" maxlength="20" />
				<text v-if="formErrors.contact_name" class="error-text">{{ formErrors.contact_name }}</text>
			</view>

			<view class="form-item">
				<text class="form-label">2. 手机号码 *</text>
				<input class="form-input" placeholder="请输入您的手机号码" v-model="formData.contact_tel" type="number"
					maxlength="11" />
				<text v-if="formErrors.contact_tel" class="error-text">{{ formErrors.contact_tel }}</text>
			</view>

			<view class="form-item">
				<text class="form-label">3. 您寻求合作的意向是 *</text>
				<textarea class="form-textarea" placeholder="请简单描述您的合作意向以及企业情况" v-model="formData.contact_text"
					maxlength="500"></textarea>
				<text v-if="formErrors.contact_text" class="error-text">{{ formErrors.contact_text }}</text>
			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="bottom-actions">
			<button class="submit-btn" @click="submitForm">
				<text class="btn-text">提交申请</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					form_type: 3, // 类型：1-茶叶定制 2-招商加盟 3-供应链合作 4-其他
					contact_name: '',
					contact_tel: '',
					contact_images: [],
					contact_text: '',
					customize_num: 0,
				},
				// 表单验证错误
				formErrors: {}
			}
		},
		methods: {
			// 表单验证
			validateForm() {
				this.formErrors = {}
				let isValid = true

				// 验证姓名
				if (!(this.formData.contact_name && this.formData.contact_name != '')) {
					this.formErrors.contact_name = '请输入您的姓名'
					isValid = false
				}

				// 验证手机号
				if (!(this.formData.contact_tel && this.formData.contact_tel != '')) {
					this.formErrors.contact_tel = '请输入手机号码'
					isValid = false
				} else {
					const phoneReg = /^1[3-9]\d{9}$/
					if (!phoneReg.test(this.formData.contact_tel)) {
						this.formErrors.contact_tel = '请输入正确的手机号码'
						isValid = false
					}
				}

				// 验证合作意向
				if (!(this.formData.contact_text && this.formData.contact_text != '')) {
					this.formErrors.contact_text = '请填写合作意向'
					isValid = false
				}

				return isValid
			},

			// 提交表单
			submitForm() {
				if (!this.validateForm()) {
					uni.showToast({
						title: '请检查表单信息',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '提交中...'
				})
				this.$api.good.AddContact(this.formData).then(res => {
					// 清空表单
					this.formData = {
						form_type: 3, // 类型：1-茶叶定制 2-招商加盟 3-供应链合作 4-其他
						contact_name: '',
						contact_tel: '',
						contact_images: [],
						contact_text: '',
						customize_num: 0,
					}
					this.formErrors = {}
					uni.showToast({
						title: res.msg,
						icon: 'success',
						duration: 3000
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.supply-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
	}

	.page-header {
		background: linear-gradient(135deg, #52a58a 0%, #459a7e 100%);
		padding: 60rpx 30rpx 40rpx;
		text-align: center;
		color: white;
	}

	.header-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.page-subtitle {
		font-size: 26rpx;
		opacity: 0.9;
	}

	.form-section {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
		font-weight: 500;
	}

	.form-input {
		width: 100%;
		height: 88rpx;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		line-height: 1.4;
	}

	.form-input:focus {
		border-color: #52a58a;
	}

	.form-select {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 88rpx;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		background-color: #ffffff;
		box-sizing: border-box;
	}

	.select-text {
		font-size: 28rpx;
		color: #333;
	}

	.select-text.placeholder {
		color: #999;
	}

	.form-textarea {
		width: 100%;
		min-height: 160rpx;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		line-height: 1.4;
	}

	.form-textarea:focus {
		border-color: #52a58a;
	}

	.radio-group {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		margin-top: 10rpx;
	}

	.radio-item {
		display: flex;
		align-items: center;
		min-height: 80rpx;
		padding: 20rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		background-color: #ffffff;
		gap: 16rpx;
		box-sizing: border-box;
	}

	.radio-item.active {
		border-color: #52a58a;
		background-color: #f0f8f5;
	}

	.radio-icon {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
	}

	.radio-item.active .radio-icon {
		border-color: #52a58a;
		background-color: #52a58a;
	}

	.radio-text {
		font-size: 26rpx;
		color: #333;
		flex: 1;
	}

	.radio-item.active .radio-text {
		color: #52a58a;
	}

	.gender-group {
		display: flex;
		gap: 20rpx;
		margin-top: 10rpx;
	}

	.gender-item {
		flex: 1;
		min-height: 80rpx;
		padding: 20rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		text-align: center;
		background-color: #ffffff;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gender-item.active {
		border-color: #52a58a;
		background-color: #f0f8f5;
	}

	.gender-text {
		font-size: 26rpx;
		color: #333;
	}

	.gender-item.active .gender-text {
		color: #52a58a;
	}

	.error-text {
		font-size: 24rpx;
		color: #ff4757;
		margin-top: 12rpx;
		display: block;
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #eee;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		z-index: 1000;
	}

	.submit-btn {
		width: 100%;
		background-color: #52a58a;
		color: #ffffff;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	.btn-text {
		color: inherit;
	}
</style>